<template>
  <div id="login">
    <div class="main_area">
      <div class="title">员工管理系统</div>
      <el-input v-model="account.username" placeholder="请输入账号" class="input"></el-input>
      <el-input v-model="account.password" placeholder="请输入密码" show-password class="input"></el-input>
      <el-button type="primary" class="buttom" @click="login">登录</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      account: {
        username: "admin",
        password: "123456"
      }
    }
  },
  methods: {
    login() {
      let that = this
      this.$http.post("/base/admin/login", this.account)
        .then(function (res) {
          if (res.code === 0) {
            that.$router.push({
              path: '/'
            })
          } else {
            that.$message({
              message: '登录失败：' + res.msg,
              type: 'warning'
            });
          }
        })
    }
  }
}
</script>

<style scoped>
.buttom {
  width: 400px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.input {
  width: 400px;
  margin-top: 40px;
}

.title {
  font-size: 32px;
  font-weight: bold;
  color: #000;
}

.main_area {
  display: flex;
  width: auto;
  flex-flow: column;
  margin: auto;
  height: auto;
  padding: 40px;
  flex-flow: column;
  align-items: center;
  background: #ffffff;
  box-shadow: 0 0 5px #2F4056;
  border-radius: 10px;
}

#login {
  width: 100%;
  height: 100%;
  display: flex;
  background: #4d4d4d;
  vertical-align: center;
  align-items: center
}
</style>
